<template>
    <div>
        <el-dialog v-model="state.dialog.show" title="上传文件" width="769px">
            <el-form ref="dialogFormRef" :model="state.form" :rules="state.rules" label-width="120px"
                     size="default">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="存储策略" prop="name">
                            <el-radio-group v-model="state.form.storageId" size="small">
                                <el-radio-button v-for="(storage,index) in state.storages" :key="index"
                                                 :label="storage.id">{{ storage.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上传文件" prop="type">
                            <file-upload v-model="fileList"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {defineAsyncComponent, reactive, ref} from 'vue';
import {storageApi} from "/@/api/storage";

const FileUpload = defineAsyncComponent(() => import('/@/components/FileUpload.vue'));
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<DialogState<UploadFileDto, { storages: Array<StorageVo> }>>({
    storages: [],
    form: {
        file: undefined,
        storageId: 0,
        isSync: false
    },
    dialog: {
        show: false,
    },
    rules: {
        "name": [{required: true, message: "请输入存储策略名", trigger: 'blur'}],
        "type": [{required: true, message: "请选择策略类型", trigger: 'blur'}],
        "config.accessKey": [{required: true, message: "请输入AccessKey", trigger: 'blur'}],
        "config.accessSecret": [{required: true, message: "请输入AccessSecret", trigger: 'blur'}],
        "config.endpointProtocol": [{required: true, message: "请选择对象存储服务器使用的协议", trigger: 'change'}],
        "config.endpoint": [{required: true, message: "请输入对象存储服务器的域名地址", trigger: 'blur'}],
        "config.bucket": [{required: true, message: "请输入Bucket名", trigger: 'blur'}],
        "config.region": [{required: true, message: "请输入Region", trigger: 'blur'}],
        "config.accessProtocol": [{required: true, message: "请选择访问文件使用的协议", trigger: 'change'}],
        "config.dirName": [{required: true, message: "请输入上传目录名", trigger: 'blur'}],
        "config.enablePathStyleAccess": [{required: true, message: "请选择路径风格", trigger: 'change'}],
        "config.domain": [{required: true, message: "请输入文件访问时使用的域名", trigger: 'blur'}],
    }
});
const fileList = ref()

// 打开弹窗
const openDialog = async () => {
    const pageResult = await storageApi.listStorage({page: 1, size: -1});
    state.storages = pageResult.records
    for (const storage of state.storages) {
        if (storage.active) {
            state.form.storageId = storage.id;
            break;
        }
    }
    state.dialog.show = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.show = false;
};

// 暴露变量
defineExpose({
    openDialog,
});
</script>
